<template>
  <div class="order-detail-page">
    <nav-bar>订单详情</nav-bar>
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ statusString }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ detailState.detail.order_no }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ detailState.detail.created_at }}</span>
      </div>
      <van-button v-if="detailState.detail.status === 1" @click="showPay" style="margin-bottom: 10px" color="#1baeae" block>去支付</van-button>
      <van-button v-if="detailState.detail.status === 3" @click="handleConfirmOrder" block>确认订单</van-button>
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ total + ".00" }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>
    <van-card
        v-for="item in detailState.detail.orderDetails.data"
        :key="item.id"
        :num="item.num"
        :price="item.price + '.00'"
        desc="全场包邮"
        :title="item.goods.title"
        :thumb="item.goods.cover_url"
    />

    <div style="width: 100%; height: 50px"></div>

    <van-popup
        v-model:show="isShowPay"
        position="bottom"
        style="height: 240px;"
    >
      <div class="pay-content">
        <van-grid :border="false" :column-num="2">
          <van-grid-item text="支付宝">
            <p>支付宝二维码</p>
            <van-image width="150" height="150" :src="aliyun"/>
          </van-grid-item>
          <van-grid-item text="微信支付">
            <p>微信二维码</p>
            <van-image width="150" height="150" :src="wechat"/>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRoute} from "vue-router";
import {confirmOrder, getOrderDetail, payOrder, payOrderStatus} from "@/network/order";
import {detailState} from "@/views/order/state";
import {onMounted, computed, ref} from "vue";
import {closeToast, showConfirmDialog, showLoadingToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";
const route = useRoute();
const router = useRouter();
const isShowPay = ref(false);
const statusString = computed(() => {
  // 1下单 2支付 3发货 4收货 5过期
  let status = ["", "已下单", "已支付", "等待发货", "确认收货", "已过期"];
  // 返回状态
  return status[detailState.detail.status];
});

// 价格计算属性
const total = computed(() => {
  let sum = 0;
  detailState.detail.orderDetails.data.forEach((item) => {
    sum += (item.num as number) * (item.price as number);
  });
  return sum;
});

function detail() {
  showLoadingToast({message:'加载中...'});
  const id = route.query.id as string;
  detailState.orderNo = id;
  // 订单详情
  getOrderDetail(id).then((res) => {
    console.log(res);
    detailState.detail = res;
    closeToast();
  });
}

onMounted(() => {
  detail();
});

function showPay() {
  isShowPay.value = true;

  payOrder(detailState.orderNo, { type: "aliyun" }).then((res) => {
    detailState.aliyun = res.qr_code_url;
    detailState.wechat = res.qr_code_url;
  });

  // 轮询查看
  const timer = setInterval(() => {
    payOrderStatus(detailState.orderNo).then((res) => {
      console.log(res);
      if (res == "2") {
        clearInterval(timer);
        isShowPay.value = false;
        router.push({ path: "/orderdetail", query: { id: detailState.orderNo } });
      }
    });
  }, 2000);
}

function handleConfirmOrder() {
  showConfirmDialog({ title: "订单", message:'是否确认订单?', width:'300', confirmButtonColor:'blue',}).then(()=>{
    confirmOrder(detailState.orderNo).then((res:any) => {
      if(res.status === 204 )
      showSuccessToast("确认成功");
      detail();
    });
  })
}
</script>

<style lang="scss" >
.order-detail-page {
  text-align: left;
  background: #f7f7f7;

  .order-status {
    background: #fff;
    margin-top: 44px;
    padding: 20px;
    font-size: 15px;

    .status-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {
      }
    }
  }

  .order-price {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;

    .price-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {
      }
    }
  }

  .van-card {
    margin-top: 0;
  }

  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pay-content {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
</style>